在当今快节奏的软件开发环境中，效率和速度往往是决定项目成功与否的关键因素。Avue，一个基于Element-plus的低代码前端框架，以其独特的JSON配置方式，为开发者提供了一种快速生成页面的方法，极大地提升了开发效率。本文将深入探讨Avue框架的配置项，帮助开发者快速上手并充分利用这一强大的工具。
一、Avue-crud 配置项简介
Avue框架的核心在于其crud（创建、读取、更新、删除）配置项，这些配置项允许开发者通过JSON格式定义页面的布局和行为。通过这种方式，开发者可以避免编写大量的HTML和JavaScript代码，从而加快开发速度。
:option="option" //表格配置属性 :table-loading="loading" //表格等待框的控制，加载的时候转圈圈，设置true/false :search.sync="search" //搜索的变量(需要sync修饰符) :visible.sync="changeInfo" //是否显示，设置true/false :data="data" //表格显示的数据 :page.sync="page" //表格分页配置选项(需要sync修饰符) :permission="permissionList" //权限控制 :before-open="beforeOpen" //打开前的回调function(file,column) v-model="form" //数据模型 用来存取页面值的 ref="crud" //在普通的 DOM 元素上使用，引用指向的就是 DOM 元素 @cell-click="pageto" //表格点击运行方法 onclick方法定义 @row-update="rowUpdate" //更新数据后确定触发该事件 @row-save="rowSave" //新增数据后点击确定触发该事件 @row-del="rowDel" //行数据删除时触发该事件 @row-click="handleRowClick" //单击行运行的方法 @search-change="searchChange" //点击搜索后触发该事件 @search-reset="searchReset" //清空搜索回调方法 @selection-change="selectionChange" //当选择项发生变化时会触发该事件 @current-change="currentChange" //点击页码会调用current-change方法回调当前页数 @size-change="sizeChange" //点击每页多少条会调size-change方法回调 @refresh-change="refreshChange" //点击刷新按钮触发该事件 @on-load="onLoad" //打开表格页面的方法，一般用来初始化，返回页面数据 > 二、crud之option解释 option配置项是Avue中定义页面行为的核心部分，它包括了数据源、分页、排序等关键属性。通过合理配置option，开发者可以控制数据的加载、显示和交互方式。 option: { height:'auto', //表格高度 calcHeight: 30, //表格高度差 searchShow: true, //首次加载是否显示搜索 searchMenuSpan: 4, //搜索按钮长度 searchSpan:6, //搜索框长度 最大长度24 border: true, //表格边框是否显示 index: true, //是否显示序号 indexLabel:'序号', //并将索引字段设置为“序号” viewBtn: true, //是否显示查看按钮 selection: true, //表格勾选列（即批量删除） dialogClickModal: false, //是否可以通过点击modal关闭Dialog addBtn:false, //是否显示添加按钮 editBtn:false, //是否显示编辑按钮 delBtn:false, //是否显示删除按钮 excelBtn:false, //表格导出按钮是否显示 labelWidth:120, //表单前面的标题长度 searchLabelWidth:80, //搜索项标题长度 refreshBtn: false, //表格上面小的 刷新按钮 columnBtn: false, //表格上面小的 列表按钮 searchBtn: false, //表格上面小的 搜索按钮 menu: true, //是否显示操作栏 menuWidth:300, //表格操作列宽度 dialogWidth: '80%', //弹出表单的弹窗宽度 saveBtnText:'保存', //保存按钮文案 updateBtnText:'修改', //修改按钮文案 cancelBtnText:'取消', //取消按钮文案 addBtnText:'新增', //新增按钮文案 editBtnText:'编辑', //编辑按钮文案 delBtnText:'删除', //删除按钮文案 viewBtnText:'查看', //查看按钮文案 searchBtnText:'搜索', //搜索按钮文案 emptyBtnText:'清空', //清空按钮文案 dialogClickModal: false, //去掉'点击屏幕空白区就关闭弹框'属性 searchShowBtn: true, //栏目折叠显隐 header:false, //隐藏表格头部操作 refreshBtn: true, //刷新 columnBtn: true, //操作列显隐 excelBtn: false, //导出Excel printBtn: false, //表格打印导出 filterBtn: false, //筛选 } 三、crud之column解释 column配置项用于定义表格中的列。每个列可以包含标签（label）、属性（prop）、显示/隐藏（display）等属性。通过精细配置列，开发者可以控制表格的展示效果和数据的交互。 column: [ { label: "用户名", //表格的标题 prop: "username", //表格的key width: "150", //表格的宽度 fixed: true, //是否冻结列 hide:true, //是否隐藏列 index:true, //是否显示表格序号 默认值：false visdiplay:true, //表单不显示 overHidden: true, //超出用省略号显示 rules: [{ //表单校验规则 required: true, //是否必填 message: "请输入用户名", //提示信息 trigger: "blur" }], addDisabled: true, //添加的时候禁止修改 editDisabled: true, //编辑的时候禁止修改 disabled:true, //禁止编辑 addDisplay: false, //新增时是否显示 editDisplay: false, //编辑时是否显示 viewDisplay: false, //查看时是否显示 display: false, //在查看，新增，编辑页面是否显示 span: 24, //span:24一条数据占一行，span:8一行3条数据 sortable:true, //排序方式切换，倒序、正序切换 search: true, //添加可搜索框 searchPlaceholder:"请选择合同来源", //搜索框辅助文字 align:"center", //表单数据居中 row: true, //是否单独成行 searchOrder:1 //搜索项位置排序，序号越大越靠前 searchLabel:'时间', } ] 四、crud之group解释 group配置项允许开发者将表单字段分组，使得页面布局更加清晰和有组织。每个分组可以有自己的标签（label）、属性（prop）和图标（icon），还可以控制是否显示箭头（arrow）等。 group: [ { label: '基本信息', prop: 'jbxx', icon: 'el-icon-edit-outline', display: true, column: [ { label: "主体类型", prop: "relType1", search: false, span: 8, editDisabled: true, }, { label: "主体名称", prop: "name", span: 8, search: false, editDisabled: true, } ] }, { label: '申请信息', prop: 'jbxx', span: 8, icon: 'el-icon-edit-outline', arrow: true, column: [ { label: "申请类型", prop: "breedType1", span: 8, hide: true, editDisabled: true, } ] }, ] 五、column类型写法 Avue支持多种类型的输入控件，包括基础输入框、下拉选择框、时间控件、计数选择器、单选框、上传图片框、多行文本域框、级联选择器、子表单、颜色控件、数组、超链接以及富文本编辑器等。每种控件都有其特定的配置方式，以满足不同的业务需求。 基础输入框 { "label": "广告标题", "prop": "title", "rules": [ { "required": true, "message": "请输入广告标题", "trigger": "blur" } ] } 下拉选择框 { "label": "设备负责人", "prop": "deviceUserId", "type": "select", "dicUrl": "/api/blade-system/dict/dictionary?code=supplierLvl", "props": { "label": "dictValue", "value": "dictKey" }, "filterable": true, "rules": [ { "required": true, "message": "请输入设备负责人", "trigger": "blur" } ] } 时间控件框 { label: "年份", prop: "yearTime", rules: [{ required: true, message: "请输入年份", trigger: "blur" }], type: "year", //类型为年份 format: "yyyy", valueFormat: "yyyy", //限制能选择的时间范围 pickerOptions: { // 禁用年份日期通过 disabledDate 设置 disabledDate(time) { return time.getTime() < Date.now(); }, } }, { label: "开始时间", prop: "startTime", type: "date", //类型为日期 format: "yyyy-MM-dd", valueFormat: "yyyy-MM-dd", rules: [{ required: true, message: "请选择开始日期", trigger: "blur" }], }, { label: "开始时间", prop: "startTime", type: "datetime", //类型为日期+时间 format: "yyyy-MM-dd HH:mm:ss", valueFormat: "yyyy-MM-dd HH:mm:ss", rules: [{ required: true, message: "请选择开始时间", trigger: "blur" }], }, { label: "时间范围", prop: "Time", type: "datetimerange", //类型为时间范围 searchRange: true, //开启范围搜索 format: "yyyy-MM-dd HH:mm:ss", valueFormat: "yyyy-MM-dd HH:mm:ss", rules: [{ required: true, message: "请选择时间范围", trigger: "blur" }], }, 计数选择器 { label: "权重", prop: "sort", type: 'number', //类型为数字 minRows: 0, //最小数字为0 tip: '只能填写数字，数字越大广告排序越前', //提示语 rules: [{ required: true, message: "请选择权重", trigger: "blur" }], }, 单选框 { label: "是否发布", prop: "isPublish", type:'radio', //类型为单选框 dicData: [ { label: "发布", value: 1 }, { label: "停用", value: 0 }, ], rules: [{ required: true, message: "请选择是否发布", trigger: "blur" }], }, 上传图片框 { label: "图片地址", prop: "photo", type:'upload', drag: true, //拖拽上传类型 action: '/api/blade-resource/file/upload', //上传路径 //返回数据结构体配置 propsHttp: { res: 'data', //返回结构体的层次 url:'url', //上传成功返回结构体的图片地址 home:'http://tzhb.zhisuaninfo.com/pic/' //图片的根路径地址 }, dataType: 'string', //正常是数组格式，添加这个属性就变成了string格式传给接口 data: { dir: 'paymentList'} , //指定上传参数 imgWidth:100, //图片宽度 imgHeight:100, //图片高度 listType:'picture-img', //图片列表类型 rules: [{ required: true, message: "请上传图片", trigger: "blur" }], }, 多行文本框 { label: "供应项目", prop: "projects", minRows: 5, //最小行/最小值 type: "textarea", //类型为多行文本域框 maxlength:500, //最大输入长度 }, 联级选择器 { label: "归属系统", prop: "systemId", rules: [{ required: true, message: "请输入归属系统", trigger: "blur" }], dicUrl: "/api/blade-property/devicesystemtype/allSystemTypeTree",//字典远程字典(填接口路径) type: 'cascader', //类型为：级联选择器 props: { label: "name", //远程字典接口对应显示字段 value: "id" //远程字典接口对应传值字段 }, filterable: true, //添加filterable属性即可启用搜索功能 checkStrictly: true, //可以选择任意一级 searchCheckStrictly:true, //可以选择任意一级(在搜索框中起作用) search:true, }, 子表单 { label: "子表单内容", prop: "RoomTollInfo", type: "dynamic", //类型为子表单(可新增删除) span: 24, labelPosition:'top', //子表单标题 children: { align: "center", column: [ { label: "价格", prop: "price", },{ label: "合同编号", prop: "contractNum", hide:true }] } }, 颜色控件 { label: "主题颜色", prop: "color", type: 'color', value:"", //默认值 disabled:true, //是否禁用 colorFormat:"hex", //颜色格式 showAlpha:false, //颜色格式 predefine: [ '#ff4500', '#ff8c00', '#ffd700' ], //预定义颜色 }, 数组 { label:'数组', prop:'array', dataType:'number', propsHttp:{ home:'http://demo.cssmoban.com', }, type:'array' } 超链接 { label:'超链接', prop:'href', type:'url' }, 引入第三方组件-富文本编辑器 main.js注册全局引入： import avueUeditor from 'avue-plugin-ueditor'; Vue.component('avueUeditor', avueUeditor); { label:'机构介绍', prop: "institutionIntroduce", component: 'AvueUeditor', options: { action: '/api/blade-resource/oss/endpoint/put-file', props: { res: "data", url: "link", } }, }, 结语 Avue框架以其低代码的特性，为前端开发带来了革命性的改变。通过本文的介绍，我们可以看到，无论是简单的文本输入还是复杂的富文本编辑，Avue都能够通过简洁的JSON配置快速实现。希望本文能够帮助开发者更好地理解和使用Avue，从而提升开发效率，创造出更多优秀的前端应用。